import { CustomElement } from "../../CustomElement"
import { Group } from "../../Group"
import { Input } from "../../Input"
import { LinearLayout } from "../../Layout"
import { Text } from "@/js/components/Text"

export class SearchMenu extends Group{
    groups: {[k:string]:LinearLayout} = {}
    content = new LinearLayout()
    pointerPosition = {
        x: 0,
        y: 0
    }
    isClose = false
    input?: Input
    itemList: CustomElement[] = []
    constructor(){
        super()
        this.initSearch()
        this.appendChild(this.content)
        this.content.column()
        this.minWidth("200px").color("#fff").zIndex(100).border("solid 1px #aaa").borderRadius("10px")

        this.background("rgb(60, 60, 60)").padding("10px").outline("none")

        this.setAttribute("tabIndex", 0)

        this.addEventListener("blur", ()=>{
            this.close()
        })
        this.addEventListener("focus", ()=>{
            this.isClose = false
        })

        this.content.maxHeight("300px").overflow('hidden').overflowY('auto')
    }

    close(){
        this.isClose = true

        setTimeout(()=>{
            if(this.isClose){
                this.removeTo()
            }
        }, 20)
    }

    initSearch(){
        const input = new Input()
        .outline("none").padding("5px 10px").width("100%").placeholder("搜索条件").marginBottom('10px')
        .fontSize("12px").borderRadius("50px").border("solid 1px #666").setAttribute("name", "search")
        
        this.input = input
        const inputBox = new LinearLayout()
        inputBox.appendChild(input)

        this.appendChild(inputBox)

        input.addEventListener("blur", ()=>{
            this.close()
        })
        input.addEventListener("focus", ()=>{
            this.isClose = false
        })
        input.addEventListener("input", ()=>{
            this.filter(input.getValue().toLocaleLowerCase())
        })

        // input.addEventListener("keydown", (e)=>{
        //     if(e.code === 'ArrowDown'){
                
        //     }
        // })
    }

    filter(value: string){
        this.itemList.forEach(item=>{
            if(item.userData.name.toLocaleLowerCase().indexOf(value) > -1){
                item.displyBlock()
            }
            else{
                item.displyNone()
            }
        })
    }

    show(x: number, y: number, left: number, top: number){
        this.appendTo( document.body )
        
        setTimeout(()=>(this.$el.focus(), this.input?.$el.focus()))

        const rectInfo = this.getRect()
        const [cw, ch] = [document.body.clientWidth,document.body.clientHeight]

        if(left + rectInfo.width > cw) {
            left -= rectInfo.width
        }
        if(top + rectInfo.height > ch) {
            top -= rectInfo.height
        }
        
        this.pointerPosition.x = x
        this.pointerPosition.y = y
        
        this.position("fixed", left + 'px', top + 'px' )
    }

    createGroup(name: string, showContent = true) {
        if(this.groups[name]) return this.groups[name]
        const group = new LinearLayout()
        group.column().marginTop("5px")
        const nameText = new LinearLayout().cursor("pointer")
        const icon = new CustomElement()
        .setHtml(`<svg t="1702188055207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6385" width="10" height="10"><path d="M142.583913 938.876226V85.444158A84.992597 84.992597 0 0 1 284.399441 21.729935l563.151519 422.00094a85.234397 85.234397 0 0 1 16.86553 119.146806 74.65566 74.65566 0 0 1-16.86553 16.86553l-569.196512 427.320533a84.932147 84.932147 0 0 1-118.844556-17.167779 82.9373 82.9373 0 0 1-17.167779-50.838389z m0 0" fill="#ffffff" p-id="6386"></path></svg>`)
        showContent || ( icon.displyNone() )
        icon.transform(`rotate(${showContent ? 90 : 0 }deg)`).margin("0 10px 0 0").transition("0.25s")
        nameText.addEventListener("click", ()=>{
            body.displyAuto("flex")
            showContent = !showContent
            icon.transform(`rotate(${showContent ? 90 : 0 }deg)`)
        })
        nameText.appendChild(icon)
        nameText.appendChild(new Text(name))
        group.appendChild(nameText)
        const body = new LinearLayout()
        body.padding("5px 10px")
        body.column()
        group.appendChild(body)
        group.userData.body = body
        group.userData.nameText = nameText
        group.userData.name = name
        group.userData.showBody = (is: boolean) => {
            showContent = is
            if(is){
                body.displyFlex()
            }
            else{
                body.displyNone()
            }
            icon.transform(`rotate(${showContent ? 90 : 0 }deg)`)
        }
        this.groups[name] = group

        group.addItem = (name:string, action: any) =>{
            const itemEl = new CustomElement().cursor("pointer").transition("0.25s").padding("5px 10px")
            itemEl.addEventListener("mouseenter", ()=>{
                itemEl.background("#666")
            })
            itemEl.addEventListener("mouseleave", ()=>{
                itemEl.background("none")
            })
            itemEl.addEventListener("click", ()=> {
                action(this.pointerPosition.x, this.pointerPosition.y)
                itemEl.background("none")
            })
            itemEl.appendChild(new Text(name))
            body.appendChild(itemEl)
            this.itemList.push(itemEl)

            itemEl.userData.name = name

            return itemEl
        }
        this.content.appendChild(group)
        return group
    }

    addItem(groupName: string, name: string, action: any){
        this.groups[groupName].addItem(name, action)
    }
}